/**
 * 同站线路公交展示组件
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types'
import { px2dp } from 'rn-xiaobu-utils';
import flex from '../../../configs/flex';
import Icon from '../../public/icon';
import fontsize from '../../../configs/fontsize';
import NavigationService from '../../../utils/NavigationService';

export default class BusItem extends Component {
  /**
   * 获取现在距离站数文字
   * @param {Number} num 现在距离站数，0-即将到站，-99-已经到站，<0 暂无车辆信息,> 0 距离几站
   * @returns {*}
   */
  nowStopNum = num => {
    switch (num) {
      case 0:
        return (
          <Text style={[fontsize.fontsize24]}>即将到站</Text>
        )
        break;
      case -99:
        return (
          <Text style={[fontsize.fontsize24]}>已经到站</Text>)
        break;
      case -1:
        return (
          <Text style={[fontsize.fontsize24]}>暂无车辆信息</Text>
        )
        break
      default:
        return (
          <Text style={[fontsize.fontsize50]}>{this.props.nowStopNum}<Text style={[fontsize.fontsize24]}>站</Text></Text>
        )
        break
    }
  }

  /**
   * 组件点击方法，跳转到线路详情页
   * @private
   */
  _onPress = () => {
    NavigationService.navigate('Line', {
      id: this.props.storeline.SUBROUTE_ID, // 线路id
      name: this.props.name,
      direction: this.props.storeline.TYPE,
      thisID: this.props.thisID// 当前站点id
    })
  }

  render () {
    return (
      <TouchableOpacity style={[styles.container, flex.flexH, flex.flexHsb]} onPress={this._onPress}
        activeOpacity={0.6}>
        <View style={[flex.flexV]}>
          <Text style={fontsize.fontsize28}>{this.props.name}</Text>
          <View style={[flex.flexH, flex.flexVc, { marginTop: px2dp(14) }]}><Icon name={'xianluguihua'}
            color={'#CCCCCC'}/><Text
            style={[fontsize.fontsize22, { color: '#CCCCCC' }]}>{this.props.start}-</Text><Text
            style={[fontsize.fontsize22, { color: '#CCCCCC' }]}>{this.props.end}</Text></View>
        </View>
        <View style={[flex.flexH, flex.flexVc]}>
          {this.nowStopNum(this.props.nowStopNum)}
          <Icon
            name={'shoucang1'} size={40}
            color={'#FDBD39'} style={{ marginLeft: px2dp(36) }}/>
        </View>
      </TouchableOpacity>
    );
  }
}

BusItem.propTypes = {
  name: PropTypes.string,
  start: PropTypes.string,
  end: PropTypes.string,
  nowStopNum: PropTypes.number
  // isCollected: PropTypes.boolean
}

const styles = StyleSheet.create({
  container: {
    paddingLeft: px2dp(40),
    paddingRight: px2dp(40),
    paddingTop: px2dp(22),
    paddingBottom: px2dp(24),
    backgroundColor: '#ffffff'
  },
  text: {
    fontSize: px2dp(24)
  }
});